<template>
  <div>
    <el-card>
      <!-- 搜索模块 -->
      <el-form
        :inline="true"
        :model="formInline"
        size="small"
        style="display: flex"
      >
        <span style="flex: 40%">
          <el-form-item label="关键字" label-width="100px">
            <el-input
              v-model="formInline.keyWords"
              placeholder="根据文章标题搜索"
            ></el-input>
          </el-form-item>
          <el-form-item label="状态" label-width="100px">
            <el-select v-model="formInline.state" placeholder="请选择">
              <el-option label="启用" value="1"></el-option>
              <el-option label="禁用" value="0"></el-option>
            </el-select>
          </el-form-item>
          <el-form-item>
            <el-button
              @click="clearfn"
              class="el-button el-button--default el-button--small"
              >清除</el-button
            >
            <el-button
              type="primary"
              @click="submit"
              class="el-button el-button--default el-button--small"
              >搜索</el-button
            >
          </el-form-item>
        </span>
        <el-form-item>
          <el-button
            type="success"
            icon="el-icon-edit"
            class="el-button el-button--success el-button--small"
            @click="articleAdd"
            >新增技巧</el-button
          >
        </el-form-item>
      </el-form>
      <!-- 数据统计 -->

      <el-alert :closable="closeAble">
        <i class="el-alert__icon el-icon-info" style="margin-right: 10px"></i>
        <span>{{ this.counts }} </span>
      </el-alert>
      <!-- 列表模块 -->
      <el-table :data="list" style="width: 100%">
        <el-table-column type="index" min-width="50" label="序号">
        </el-table-column>
        <el-table-column type="title" min-width="280" label="文章标题">
          <template slot-scope="scope">
            <span>{{ scope.row.title }}</span>
            <span>
              <a
                :href="scope.row.videoURL"
                @click.prevent="hVideo(scope.row.videoURL, scope.row.title)"
              >
                <i
                  :class="{ 'el-icon-video-camera-solid': scope.row.videoURL }"
                ></i>

                <span v-show="false">
                  {{ scope.row.videoURL }}
                </span>
              </a>
            </span>
          </template>
        </el-table-column>
        <el-table-column type="number" min-width="100" label="阅读数">
          <template slot-scope="scope">
            <span>{{ scope.row.visits }}</span>
          </template>
        </el-table-column>

        <el-table-column label="录入人" min-width="90">
          <template slot-scope="scope">
            <p>{{ scope.row.username }}</p>
          </template>
        </el-table-column>
        <el-table-column label="录入时间" min-width="160">
          <template slot-scope="scope">
            <i class="el-icon-time"></i>
            <span style="margin-left: 10px">{{
              getTime(scope.row.createTime)
            }}</span>
          </template>
        </el-table-column>
        <el-table-column type="title" min-width="60" label="状态">
          <template slot-scope="scope">
            <p>{{ getState(scope.row.state) }}</p>
          </template>
        </el-table-column>

        <el-table-column label="操作" fixed="right" min-width="120">
          <template slot-scope="scope">
            <el-button size="mini" type="text" @click="hWatch(scope.row.id)"
              >预览</el-button
            >
            <el-button size="mini" type="text">
              <span v-if="scope.row.state === 0" @click="hEnable(scope.row.id)"
                >启用</span
              >
              <span v-else @click="hDisable(scope.row.id)">禁用</span>
            </el-button>
            <el-button
              size="mini"
              type="text"
              :disabled="scope.row.state === 0 ? true : false"
              @click="hEdit(scope.row.id)"
              >修改</el-button
            >
            <el-button
              size="mini"
              type="text"
              :disabled="scope.row.state === 0 ? true : false"
              @click="hDelete(scope.row.id)"
              >删除</el-button
            >
          </template>
        </el-table-column>
      </el-table>
      <!-- 分页 -->
      <div class="block">
        <span class="demonstration"></span>
        <el-pagination
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
          :current-page="listpage.page"
          :page-sizes="[5, 10, 20, 30, 40, 50]"
          :page-size="listpage.pagesize"
          :total="listpage.counts"
          layout="  prev, pager, next,sizes, jumper"
        >
        </el-pagination>
      </div>
    </el-card>
    <!-- 新增技巧弹框组件 -->
    <el-dialog
      title="新增技巧"
      :visible.sync="dialogFormVisible"
      @close="hDialogClose"
    >
      <Articles-add @closeDialog="closeDialog" ref="formComp"> </Articles-add>
    </el-dialog>
    <!-- 预览文章弹框 -->
    <el-dialog title="预览文章" :visible.sync="showDialog">
      <Articles-preview :articlelist="articlelist"></Articles-preview>
    </el-dialog>
    <!-- 编辑 dialog -->
    <el-dialog title="修改" :visible.sync="dialogEdit">
      <Articles-edit
        :articleForm="articleForm"
        @closeEdit="closeEdit"
      ></Articles-edit>
    </el-dialog>
    <!-- 视频弹框 -->
    <el-dialog
      :title="videotitle"
      :visible.sync="dialogVisible"
      width="850px"
      :before-close="hClose"
    >
      <video
        v-if="showvideo"
        id="video"
        :autoplay="autoplay"
        :src="videoUrl"
        controls
        width="800px"
        height="380px"
      ></video>
      <span slot="footer">
        <el-button @click="dialogVisible = false">取 消</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
import {
  list as getlist,
  detail,
  changeState,
  remove
} from '@/api/hmmm/articles'
import ArticlesAdd from '@/module-hmmm/components/articles-add.vue'
import ArticlesPreview from '@/module-hmmm/components/articles-preview.vue'
import ArticlesEdit from '@/module-hmmm/components/articles-edit.vue'
export default {
  components: { ArticlesAdd, ArticlesPreview, ArticlesEdit },
  data () {
    return {
      videotitle: '', // 视频标题
      showvideo: false, // 视频标签显示隐藏
      autoplay: false, // 视频自动播放
      videoUrl: '', // 视频地址
      articleForm: {}, // 修改文章的收集的数据
      articlelist: '', // 预览选中文章数据
      total: 1, // 文章列表总页数
      list: [], // 接收后端文章列表返回的数据
      listpage: {
        // 分页数据
        page: 1, // 当前页数
        pages: 100, // 总页数
        pagesize: 10, // 每页条数
        counts: 100 // 总条数
      },
      closeAble: false, // 控制统计数据模块可否关闭
      formInline: {
        // 搜索框
        keyWords: '', // 关键字
        state: '' // 状态
      },
      //   新增技巧
      dialogFormVisible: false, // 控制弹框显示隐藏
      // 预览弹框
      showDialog: false,
      //   修改弹框
      dialogEdit: false,
      // 视频弹框
      dialogVisible: false
    }
  },
  computed: {
    counts () {
      return `数据一共 ${this.listpage.counts}  条`
    }
  },
  created () {
    this.getArticles()
  },
  methods: {
    getState (state) {
      // 把0,1换成启用禁用
      return state === 1 ? '已启用' : '已禁用'
    },
    // 格式化时间
    getTime (time) {
      return time.replace(/T/, ' ').slice(0, 19)
    },
    async getArticles () {
      try {
        // 获取文章列表
        const res = await getlist(this.listpage) // 传入分页配置获取后台数据
        //   console.log(res)
        this.list = res.data.items
        this.listpage.counts = res.data.counts // 数据总条数
        // console.log(this.list)
      } catch (err) {
        this.$message.error(err.message)
      }
    },
    async submit () {
      try {
        // 搜索框提交
        console.log('关键字', this.formInline.keyWords)
        console.log('状态', this.formInline.state)
        const res = await getlist({
          state: this.formInline.state,
          keyword: this.formInline.keyWords
        })
        if (this.formInline.state === '' && this.formInline.keyWords === '') {
          return this.getArticles() // 搜索框为空,获取所有数据
        }
        this.listpage.counts = res.data.counts // 数据总条数
        console.log(res.data.items)
        this.list = res.data.items // 筛选后的数据
      } catch (err) {
        this.$message.error(err.message)
      }
    },
    clearfn () {
      // 清空搜索框
      this.formInline = {}
      this.listpage.page = 1
      this.getArticles()
    },
    // 修改文章
    async hEdit (id) {
      try {
        this.dialogEdit = true // 显示修改弹框
        const res = await detail({ id: id })
        console.log('编辑的是', res)
        this.articleForm = res.data // 收集当前编辑文章的数据
      } catch (err) {
        this.$message.error(err.message)
      }
    },
    closeEdit () {
      this.dialogEdit = false // 隐藏修改弹框
      this.getArticles()
    },
    // 删除文章
    async hDelete (id) {
      try {
        this.$confirm('确定要删除该文章?', '温馨提示', { type: 'warning' })
          .then(async () => {
            const res = await remove({ id: id })
            console.log('删除的是', res)
            this.getArticles()
            this.$message.success('删除成功!')
          })
          .catch(() => {
            this.$message('取消删除!')
          })
      } catch (err) {
        this.$message.error(err.message)
      }
    },
    handleSizeChange (val) {
      // 更改每页显示的条数
      this.listpage.pagesize = val // 当前每页显示条数
      this.listpage.page = 1
      console.log(`每页 ${val} 条`)
      this.getArticles()
    },
    handleCurrentChange (val) {
      // 点击某一个页码
      this.listpage.page = val // 当前页码
      console.log(`当前页: ${val}`)
      this.getArticles()
    },
    // 新增技巧
    articleAdd () {
      this.dialogFormVisible = true
    },
    // 新增技巧弹框关闭
    closeDialog () {
      this.dialogFormVisible = false // 关闭弹出层

      //   this.getArticles()
    },
    // 新增技巧弹框close回调事件
    hDialogClose () {
      this.getArticles()

      // close事件调用子组件清空输入框和清除表单校验方法
      this.$refs.formComp.resetForm()
    },
    // 预览弹框
    async hWatch (id) {
      try {
        this.showDialog = true
        const res = await detail({ id: id }) // 后台获取当前预览文章数据
        console.log(res.data)
        this.articlelist = res.data // 当前选中文章数据
      } catch (err) {
        this.$message.error(err.message)
      }
    },

    // 启用
    async hEnable (id) {
      try {
        console.log('启用')
        const res = await changeState({ id: id, state: 1 })
        console.log(res)
        this.getArticles()
        this.$message.success('操作成功!')
      } catch (err) {
        this.$message.error(err.message)
      }
    },
    // 禁用
    async hDisable (id) {
      try {
        console.log('禁用')
        const res = await changeState({ id: id, state: 0 })
        console.log(res)
        this.getArticles()
        this.$message.success('操作成功!')
      } catch (err) {
        this.$message.error(err.message)
      }
    },
    // 视频弹框关闭
    hClose () {
      this.dialogVisible = false
      this.showvideo = false // 关闭视频标签
      // 关闭弹出框时 视频关闭播放,只能暂停不能销毁视频组件,所以注释掉采用了v-if方法
      //   const video = document.getElementById('video')
      //   video.pause()
      this.getArticles()
    },
    // 视频弹框开启
    hVideo (url, title) {
      this.showvideo = true // 创建视频标签
      this.dialogVisible = true // 视频弹框开启
      this.videoUrl = url // 传入视频地址
      this.videotitle = title // 传入视频标题
      this.autoplay = true
    }
  }
}
</script>

<style scoped >
.container {
  margin: 20px;
}
.block {
  margin-top: 20px;
  text-align: right;
}
</style>
